{{ define "js" }}
  <script>
    var params = new URLSearchParams(window.location.search)
    var emailParam = params.get("email")
    var emailInput = document.getElementById("email")

    if (emailParam && emailParam.length && emailInput && !emailInput.value) {
      emailInput.value = emailParam
    }

    emailInput.addEventListener("input", function (ev) {
      if (ev.target.value && ev.target.value.length) {
        updateBackLink(ev.target.value)
      }
    })

    if (emailInput && emailInput.value && emailInput.value.length) {
      updateBackLink(emailInput.value)
    }

    function updateBackLink(value) {
      var backToLogin = document.getElementById("backToLogin")
      if (value && value.length) {
        backToLogin.setAttribute("href", "/login?email=" + encodeURI(value))
      } else {
        backToLogin.setAttribute("href", "/login")
      }
    }
  </script>
{{ end }}

{{ define "css" }}
{{ end }}

{{ define "content" }}
  {{ with .Data }}
    <div class="container mt-2">
      <div class="row my-3">
        <div class="col-lg-6 col-sm-8 col-xl-5 mx-auto">
          <h1 class="h2">Request Password Reset</h1>
          <p>Enter your email and we will send you a link to reset your password.</p>
          {{ if .Flashes }}
            {{ range $i, $flash := .Flashes }}
              <div class="alert {{ if contains $flash "Error" }}alert-danger{{ else }}alert-success{{ end }} alert-dismissible fade show my-3 py-2" role="alert">
                <div class="p-2">{{ $flash | formatHTML }}</div>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                  <span aria-hidden="true">&times;</span>
                </button>
              </div>
            {{ end }}
          {{ end }}
          <form action="/requestReset" method="post">
            {{ .CsrfField }}
            <div class="form-group">
              <label for="email">Email</label>
              <input type="text" class="form-control" id="email" name="email" inputmode="email" maxlength="100" required autofocus />
            </div>
            <button type="submit" class="btn btn-primary float-right">Reset</button>
          </form>
          <a id="backToLogin" href="/login"><i class="fas fa-chevron-left"></i> back to login</a>
        </div>
      </div>
    </div>
  {{ end }}
{{ end }}
